<template>
  <!-- <div class="recmd">
    <div class="title">商品推荐</div>
    <van-grid :column-num="3">
      <van-grid-item v-for="item of recomd.slice(0,3)" :key="item.goodsId">
          <van-image :src="$filterImage(item.image)" />
          <div class="goodsname">{{item.goodsName}}</div>
          <div class="price">￥{{item.price.toFixed(2)}}(￥{{item.mallPrice.toFixed(2)}})</div>
      </van-grid-item>
    </van-grid>
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="item of recomd" :key="item.goodsId">
        <router-link :to="{path:'/details',query:{id:item.goodsId}}">
          <van-image :src="$filterImage(item.image)" />
        </router-link>
      </swiper-slide>
      
    </swiper>
  </div>-->
  <div class="recommend">
    <h2 class="title">商品推荐</h2>
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="item of recommend" :key="item.goodsId">
        <router-link :to="{path:'/details',query:{id:item.goodsId}}">
          <van-image :src="$filterImage(item.image)" lazy-load>
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div class="goodsName">{{item.goodsName}}</div>
          <div class="goodsPrice">{{item.price | toFixed | rmb}}({{item.price | toFixed | rmb}})</div>
        </router-link>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  //name: "swiper-example-multiple-slides-per-biew",
  //title: "Multiple slides per view",
  compoents: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 1
      },
      recommend: []
    };
  },
  created() {
    this.$eventBus.$on("getIndexInfo", res => {
      //console.log(res)
      this.recommend = res.recommend;
    });
  }
};
</script>

<style lang="scss">
@import "@/style/home/recommend.scss";
.goodsName,.goodsPrice{
  text-align: center;
  color: #000;
  background-color: #fff;
}
</style>